<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>actionPrompt - Example of Bubbling technique</title>
<meta name='author' content='Caridy Patino (caridy at gmail.com)' />
<!-- Reset and Fonts -->
<link rel="stylesheet" type="text/css" href="../assets/example.css">
<!-- Dependency source files -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/utilities/utilities.js"></script>
<script type="text/javascript" src='../../../yui-cms/build/bubbling/bubbling.js'></script>
<script type="text/javascript">
  YAHOO.CMS.Bubble.addDefaultAction('actionPrompt', 
	    function (layer, args) {
	      alert ('Behavior {actionPrompt}, define the functionality here using the reference of the event target: ' + args[1].target.href);
	    }
	);
</script>
<!-- YUI Basement Style -->
<style>
	.linking { color: red; }
</style>
</head>
<body id="cms-body">
<div id="doc">
	
	<div class="path">
	  <a href="http://bubbling.comarq.com/" target="_top">Bubbling Library</a> &gt; <a href="http://bubbling.comarq.com/eng/examples" target="_top">Examples</a>
	</div>
	
	<h1>Examples of Using the Bubbling Technique: Simple Actions </h1>
	
	<p>Benefit from the bubbling technique: Untied your XHTML code from the javascript listeners, no more addListener in your  code. Just define the class of each link, and the corresponding behavior for  each link&acute;s class:</p>
    <ul>
		<li>- Link with &quot;rel&quot; actionPrompt: <a href="http://bubbling.comarq.com/" rel="actionPrompt">click here</a></li>
		<li>- Link with &quot;class&quot; actionPrompt: <a href="http://bubbling.comarq.com/" class="actionPrompt">click here</a></li>
		<li>- Link with more than one &quot;class&quot; including actionPrompt: <a href="http://bubbling.comarq.com/" class="linking actionPrompt">click here</a></li>
		<li>- Link without &quot;rel&quot; and &quot;class&quot;: <a href="http://bubbling.comarq.com/" target="_top">click here</a></li>
	 </ul>
	
</div>



</body>
</html>